<script setup>
import { ref, onBeforeUnmount } from 'vue'
import { initWS } from '/src/utils/initWS.js'
import { dataPro_software, deviceName, faultTypes } from '../js/dataPro_software.js'

const ip = `ws://${window.location.host}/ws/`
// const ip = `ws://10.202.1.31:20038/`
const config = {
  path: `${ip}monitor/running-status`,
  // path: 'ws://localhost:8080',
  name: 'mec状态信息',
}

let data = ref(null)
const handleWsData = (e) => {
  data.value = dataPro_software(JSON.parse(e.data)['mec-running-status'])
}
const ws = initWS(config, handleWsData)

// 卸载
onBeforeUnmount(() => {
  if (ws) ws.close()
})

const nameF = (row) => {
  return deviceName[row['device-type']]
}

const nameT = (row) => {
  return faultTypes[row['fault-type']]
}

const formatTimestamp = (row) => {
  const date = new Date(row['fault-time'])
  return date.toISOString().replace('T', ' ').split('.')[0] // 格式: YYYY-MM-DD HH:mm:ss
}

const formatTimestamp2 = (row) => {
 return row[row.key] == 0 ? '正常':'离线'
}

const statusName = (row) => {
  return row.active == 0 ? '正常':'离线'
}
</script>

<template>
  <div class="software-container">
    <div class="top">
      <p>MEC状态信息</p>
    </div>

    <div class="showTableEle2">
      <el-table :data="data?.status" border style="width: 700px">
        <el-table-column prop="name" label="模块" align="center"  width="300" />
        <el-table-column prop="value" label="参数" align="center" :formatter="formatTimestamp2" />
      </el-table>
    </div>

    <div class="showTableEle2">
      <p>感知设备故障列表</p>
      <el-table :data="data?.vecFaultInfo" border style="width: 100%">
        <el-table-column prop="name" label="模块" align="center" width="300" />
        <el-table-column prop="device-sn" label="标识码" align="center" width="394" />
        <el-table-column prop="device-type" label="设备类型" :formatter="nameF" align="center" />
        <el-table-column prop="fault-type" label="故障类型" :formatter="nameT" align="center" />
        <el-table-column prop="fault-time" label="故障时间" :formatter="formatTimestamp" align="center" />
        <el-table-column prop="fault-desc" label="故障描述" align="center" />
      </el-table>
    </div>

    <div class="showTableEle2">
      <p>rsu运行状态列表</p>
      <el-table :data="data?.vecRsuStatus" border style="width: 100%">
        <el-table-column prop="name" label="模块" align="center" width="300" />
        <el-table-column prop="rsu-sn" label="标识码" align="center" />
        <el-table-column prop="device-type" label="设备类型" :formatter="nameF" align="center" />
        <el-table-column prop="active" label="运行状态" align="center">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.active == 0">正常</el-tag>
            <el-tag type="danger" v-else>故障</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="联网状态" align="center">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.status == 0">在线</el-tag>
            <el-tag type="danger" v-else>离线</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="showTableEle2">
      <p>感知设备运行状态列表</p>
      <el-table :data="data?.vecSensorStatus" border style="width: 100%">
        <el-table-column prop="name" label="模块" align="center" width="300" />
        <el-table-column prop="sensor-sn" label="标识码" align="center" />
        <el-table-column prop="device-type" label="设备类型" :formatter="nameF" align="center" />
        <el-table-column prop="active" label="运行状态" align="center">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.active == 0">正常</el-tag>
            <el-tag type="danger" v-else>故障</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="联网状态" align="center">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.status == 0">在线</el-tag>
            <el-tag type="danger" v-else>离线</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="less" scoped>
::v-deep .el-table .cell {
  padding: 4px 10px;
}
.showTableEle2 {
  margin-bottom: 20px;
  > p {
    margin-bottom: 10px;
    font-size: 14px;
  }
}

.software-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.top {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}

.showTableEle {
  padding-bottom: 20px;
}
</style>
